<template>
  <view
    class="custom-navbar"
    :style="{ paddingTop: safeAreaInsets?.top + 'px',backgroundColor: bgColor }"
  >
    <!-- 状态栏占位（可选） -->
    <!-- <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> -->

    <!-- 导航栏内容 -->
    <view class="nav-content" :style="{ height: navBarHeight + 'px' }">
      <view class="nav-left">
        <slot name="left">
          <!-- <view class="back uni-flex uni-align-center uni-justify-center" @click="handleBack"><uni-icons type="left" size="20"></uni-icons></view> -->
        </slot>
      </view>

      <view class="nav-center">
        <slot name="center">
          <text>{{ title }}</text>
        </slot>
      </view>

      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
// 响应式数据
const statusBarHeight = ref(0); // 默认为0表示不需要状态栏占位
const navBarHeight = ref(44);

// 接收props
const props = defineProps({
  title: String,
  bgColor: {
    type: String,
    default: "",
  },
  showStatusBar: {
    type: Boolean,
    default: false,
  },
});

// 获取系统信息
onMounted(() => {
  if (props.showStatusBar) {
    uni.getSystemInfo({
      success: (res) => {
        statusBarHeight.value = res.statusBarHeight || 0;
        navBarHeight.value = res.platform === "android" ? 48 : 44;
      },
    });
  }
});

// 返回按钮事件
const handleBack = () => {
  uni.navigateBack();
};
</script>
  
  <style scoped>
.custom-navbar {
  width: 100%;
  /* 改为relative定位 */
  /* top: 0;
    left: 0;
    right: 0; */
}

.status-bar {
  width: 100%;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rpx;
  position: relative;
}

.nav-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  font-weight: 500;
  font-size: 36rpx;
  color: #303133;
  z-index: 1;
}

.nav-left,
.nav-right {
  min-width: 80rpx;
  z-index: 1;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>